<template>
    <div class="content">
        <div class="title-item">
            <span>交通运输客运量</span>
        </div>
        <div class="table-div">
            <van-row class="table-item">
                <van-col span="3">

                </van-col>
                <van-col span="4">
                    类别
                </van-col>
                <van-col span="4">
                    车辆数
                </van-col>
                <van-col span="4">
                    班次
                </van-col>
                <van-col span="4">
                    容量
                </van-col>
                <van-col span="5">
                    容量前日比
                </van-col>
            </van-row>
            <van-row class="table-item" v-for="(item,index) in passengerTraffic " :key="index">
                <van-col span="3" >
                    <van-icon name="star-o" />
                </van-col>
                <van-col span="4">
                    {{item.type}}
                </van-col>
                <van-col span="4">
                    {{item.vehicles_num}}
                </van-col>
                <van-col span="4">
                    {{item.shift_num}}
                </van-col>
                <van-col span="4">
                    {{item.capacity_num}}
                </van-col>
                <van-col span="5">
                    {{item.capacity_ratio}}
                </van-col>
            </van-row>
             <div class="divider"></div>
        </div>
        <div class="title-item">
            <span>公交车运输客运量趋势</span>
        </div>
        <div class="chart-div">
            <div id="busTraffic" class="chart-item-1"></div>
            <div class="divider"></div>
        </div>
        <div class="title-item">
            <span>出租车运输客运量趋势</span>
        </div>
        <div class="chart-div">
            <div id="taxiTraffic" class="chart-item-1"></div>
            <div class="divider"></div>
        </div>
        <div class="title-item">
            <span>地铁运输客运量趋势</span>
        </div>
        <div class="chart-div">
            <div id="underTraffic" class="chart-item-1"></div>
            <div class="divider"></div>
        </div>
        <div class="title-item">
            <span>公路出入境趋势</span>
        </div>
        <div class="chart-div">
            <div id="highwayExit" class="chart-item-1">
            </div>
            <div class="divider"></div>
        </div>
        <div class="title-item">
            <span>铁路出入境趋势</span>
        </div>
        <div class="chart-div">
            <div id="railwayExit" class="chart-item-1"></div>
            <div class="divider"></div>
        </div>
        <div class="title-item">
            <span>机场出入境趋势</span>
        </div>
        <div class="chart-div">
            <div id="airportExit" class="chart-item-1"></div>
            <div class="divider"></div>
        </div>
        <div class="title-item">
            <span>口岸出入境趋势</span>
        </div>
        <div class="chart-div">
            <div id="portExit" class="chart-item-1"></div>
            <div class="divider"></div>
        </div>
    </div>
</template>

<script>
import echarts from 'echarts'
import { Dialog } from 'vant'
import { jtysthreeList, twojtystwoList, jtysglList, jtystlList, jtysjcList, jtyskaList } from '@/api/transportation/index'
export default {
  name: 'index',
  data () {
    return {
      list: [],
      passengerTraffic: []
    }
  },
  methods: {
    // 交通运输客运量趋势 (x轴为时间 => xData sum当期，old_sum同期 公交 出租车 地铁)
    busTraffic (xData, sum, oldSum) {
      let myChart = echarts.init(document.getElementById('busTraffic'))
      // 指定图表的配置项和数据
      let option = {
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          bottom: 10,
          left: 'center',
          data: ['公交同期', '公交当期']
        },
        grid: {
          left: '5',
          right: '20',
          bottom: '12%',
          top: '5%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: xData
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            formatter: '{value}'
          }
        },
        series: [
          {
            name: '公交同期',
            type: 'line',
            data: sum,
            color: '#8cd5c2', // 改变折线点的颜色
            lineStyle: {
              color: '#8cd5c2' // 改变折线颜色
            }
          },
          {
            name: '公交当期',
            type: 'line',
            data: oldSum,
            color: '#d68a6f', // 改变折线点的颜色
            lineStyle: {
              color: '#d68a6f' // 改变折线颜色
            }
          }
        ]
      }

      // 使用刚指定的配置项和数据显示图表
      myChart.setOption(option)
    },
    taxiTraffic (xData, sum, oldSum) {
      let myChart = echarts.init(document.getElementById('taxiTraffic'))
      // 指定图表的配置项和数据
      let option = {
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          bottom: 10,
          left: 'center',
          data: ['出租车同期', '出租车当期']
        },
        grid: {
          left: '5',
          right: '20',
          bottom: '12%',
          top: '5%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: xData
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            formatter: '{value}'
          }
        },
        series: [
          {
            name: '出租车同期',
            type: 'line',
            data: sum,
            color: '#8cd5c2', // 改变折线点的颜色
            lineStyle: {
              color: '#8cd5c2' // 改变折线颜色
            }
          },
          {
            name: '出租车当期',
            type: 'line',
            data: oldSum,
            color: '#d68a6f', // 改变折线点的颜色
            lineStyle: {
              color: '#d68a6f' // 改变折线颜色
            }
          }
        ]
      }

      // 使用刚指定的配置项和数据显示图表
      myChart.setOption(option)
    },
    underTraffic (xData, sum, oldSum) {
      let myChart = echarts.init(document.getElementById('underTraffic'))
      // 指定图表的配置项和数据
      let option = {
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          bottom: 10,
          left: 'center'
        },
        grid: {
          left: '5',
          right: '20',
          bottom: '12%',
          top: '5%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: xData
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            formatter: '{value}'
          }
        },
        series: [
          {
            name: '地铁同期',
            type: 'line',
            data: sum,
            color: '#8cd5c2', // 改变折线点的颜色
            lineStyle: {
              color: '#8cd5c2' // 改变折线颜色
            }
          },
          {
            name: '地铁当期',
            type: 'line',
            data: oldSum,
            color: '#d68a6f', // 改变折线点的颜色
            lineStyle: {
              color: '#d68a6f' // 改变折线颜色
            }
          }
        ]
      }

      // 使用刚指定的配置项和数据显示图表
      myChart.setOption(option)
    },
    // 公路出入境趋势 (x轴为时间 => xData 折线为入境 => inData 柱状为出境 => outData )
    highwayExit (data) {
      let xData = []; let inData = []; let outData = []
      data.forEach((item) => {
        xData.push(item.md)
        inData.push(item.in_num)
        outData.push(item.out_num)
      })
      let myChart = echarts.init(document.getElementById('highwayExit'))
      let option = {
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          bottom: 10,
          data: ['出', '入']
        },
        grid: {
          left: '10',
          right: '15',
          bottom: '12%',
          top: '5%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: xData
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '出',
            type: 'bar',
            data: outData,
            color: '#8cd5c2', // 改变折线点的颜色
            lineStyle: {
              color: '#8cd5c2' // 改变折线颜色
            }
          },
          {
            name: '入',
            type: 'line',
            data: inData,
            color: '#d68a6f', // 改变折线点的颜色
            lineStyle: {
              color: '#d68a6f' // 改变折线颜色
            }
          }
        ]
      }
      myChart.setOption(option)
    },
    // 铁路出入境趋势 (x轴为时间 => xData 折线蓝色为入境 => inData 折线红色为出境 => outData )
    railwayExit (data) {
      let xData = []; let inData = []; let outData = []
      data.forEach((item) => {
        if (!xData.includes(item.md)) { xData.push(item.md) }
        if (item.type === '出') {
          outData.push(item.NUM)
        } else if (item.type === '入') {
          inData.push(item.NUM)
        }
      })
      let myChart = echarts.init(document.getElementById('railwayExit'))
      let option = {
        tooltip: {
          trigger: 'axis'
        },
        grid: {
          left: '10',
          right: '20',
          bottom: '10%',
          top: '5%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: xData
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            formatter: '{value}'
          }
        },
        series: [
          {
            name: '出',
            type: 'line',
            data: outData,
            color: '#8cd5c2', // 改变折线点的颜色
            lineStyle: {
              color: '#8cd5c2' // 改变折线颜色
            }
          },
          {
            name: '入',
            type: 'line',
            data: inData,
            color: '#d68a6f', // 改变折线点的颜色
            lineStyle: {
              color: '#d68a6f' // 改变折线颜色
            }
          }
        ],
        legend: {
          bottom: 10,
          data: ['出', '入']
        }
      }
      myChart.setOption(option)
    },
    // 机场出入境趋势 (x轴为时间 => xData 折线为入境 => inData 柱状为出境 => outData )
    airportExit (data) {
      let xData = []; let inData = []; let outData = []
      data.forEach((item) => {
        xData.push(item.md)
        inData.push(item.in_num)
        outData.push(item.out_num)
      })
      let myChart = echarts.init(document.getElementById('airportExit'))
      let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#2BD32B'
            }
          }
        },
        legend: {
          bottom: 10,
          data: ['出', '入']
        },
        grid: {
          left: '15',
          right: '15',
          bottom: '10%',
          top: '5%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: true,
            data: xData
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '出',
            type: 'bar',
            data: outData,
            color: '#37a2da'
          },
          {
            name: '入',
            type: 'line',
            data: inData,
            color: '#67e0e3'
          }
        ]
      }
      myChart.setOption(option)
    },
    // 口岸出入境趋势(x轴为时间 => xData   入境 => inData 出境 => outData )
    portExit (data) {
      let xData = []; let inData = []; let outData = []
      data.forEach((item) => {
        xData.push(item.md)
        inData.push(item.in_num)
        outData.push(item.out_num)
      })
      let myChart = echarts.init(document.getElementById('portExit'))
      let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        legend: {
          bottom: 10,
          data: ['出', '入']
        },
        grid: {
          left: '15',
          right: '20',
          bottom: '10%',
          top: '5%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: xData
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '出',
            type: 'line',
            areaStyle: {},
            data: outData,
            color: '#67e0e3'
          },
          {
            name: '入',
            type: 'line',
            areaStyle: {},
            data: inData,
            color: '#9fe6b8'
          }
        ]
      }
      myChart.setOption(option)
    },
    // 获取数据
    getData () {
      // 交通运输客运量
      jtysthreeList().then(({ data }) => {
        let { errcode, data: res, errmsg } = data
        if (errcode === 0) {
          // console.log(res, '交通运输客运量')
          this.passengerTraffic = res
        } else {
          Dialog.alert({
            message: errmsg
          })
        }
      })
      // 交通运输客运量趋势
      twojtystwoList().then(({ data }) => {
        let { errcode, data: res, errmsg } = data
        if (errcode === 0) {
          let xData = []; let busSum = []; let busOldSum = []; let taxiSum = []; let taxiOldSum = []; let underSum = []; let underOldSum = []
          res.forEach(item => {
            xData.push(item.md)
            busSum.push(item.bus_sum)
            busOldSum.push(item.bus_old_sum)
            taxiSum.push(item.taxi_sum)
            taxiOldSum.push(item.taxi_old_sum)
            underSum.push(item.under_sum)
            underOldSum.push(item.under_old_sum)
          })
          this.busTraffic(xData, busSum, busOldSum)
          this.taxiTraffic(xData, taxiSum, taxiOldSum)
          this.underTraffic(xData, underSum, underOldSum)
        } else {
          Dialog.alert({
            message: errmsg
          })
        }
      })
      // 公路出入境趋势
      jtysglList().then(({ data }) => {
        let { errcode, data: res, errmsg } = data
        if (errcode === 0) {
          // console.log(res, '公路出入境趋势')
          this.highwayExit(res)
        } else {
          Dialog.alert({
            message: errmsg
          })
        }
      })
      // 铁路出入境趋势
      jtystlList().then(({ data }) => {
        let { errcode, data: res, errmsg } = data
        if (errcode === 0) {
          // console.log(res, '铁路出入境趋势')
          this.railwayExit(res)
        } else {
          Dialog.alert({
            message: errmsg
          })
        }
      })
      // 机场出入境趋势
      jtysjcList().then(({ data }) => {
        let { errcode, data: res, errmsg } = data
        if (errcode === 0) {
          // console.log(res, '机场出入境趋势')
          this.airportExit(res)
        } else {
          Dialog.alert({
            message: errmsg
          })
        }
      })
      // 口岸出入境趋势 (暂放)
      jtyskaList().then(({ data }) => {
        let { errcode, data: res, errmsg } = data
        if (errcode === 0) {
          // console.log(res, '口岸出入境趋势')
          this.portExit(res)
        } else {
          Dialog.alert({
            message: errmsg
          })
        }
      })
    }
  },
  mounted () {
    this.getData()
  }
}
</script>

<style scoped>
    .content{
        background-color: #efefef;
    }
    .chart-item-1 {
        width: 100%;
        height: 300px;
    }

    .chart-item {
        width: 100%;
        height: 300px;
        text-align: -webkit-center;
    }

    .title-item {
        padding: 10px;
        font-size: 14px;
        color: #333333;
    }

    .title-item span {
        border-left: 5px solid #8b0000;
        padding-left: 5px;
    }

    .table-item{
        font-size: 10px;
        text-align: center;
        padding: 0 5px;
        border: 1px solid #dddddd;
        border-top: 0;
    }
    .table-item:first-child{
        border-top: 1px solid #dddddd;
    }
    .table-item:nth-child(2n+1){
        background: #ffffff;
    }

    .table-div {
        padding: 0 10px;
    }

    .van-col {
        padding: 10px 0;
    }

    .content >>> .van-progress__pivot {
        background-color: initial !important;
        color: #ffffff;
    }

    /*.content >>> .van-progress{*/
    /*    background-color: #dddddd;*/
    /*}*/
    .van-tag {
        margin-right: 1px;
    }
    .chart-div{
        padding: 0 10px;
    }
    .chart-div .chart-item-1,.chart-div .chart-item,.chart-div .table-item{
        background-color: #ffffff;
    }
    .divider{
        width: 100%;
        height: 5px;
        background-color: rgb(204, 204, 204);
        margin-top: 10px;
    }
</style>
